<template>
  <Select v-model="innerValue" placeholder="请选择审批权限">
    <SelectOption v-for="item in authList" :value="item.value">
      {{ item.title }}
    </SelectOption>
  </Select>
</template>
<script>
import {Select} from 'ant-design-vue';

export default {
  name: 'AuthSelector',
  components: {
    Select,
    SelectOption: Select.Option,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    formType: {
      type: String,
      default: undefined,
    },
    service: {
      type: Function,
      default: () => () => {
      }
    },
    value: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      authList: [],
    };
  },
  methods: {
    loadAuthList() {
      if (this.service && this.formType) {
        this.service.get('/auth/loadActionAuth', {params: {formType: this.formType}}).then(data => this.authList = data);
      }
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('change', value);
      },
    }
  },
  watch: {
    value: {
      handler() {
        this.loadAuthList();
      },
      immediate: true,
    }
  }
};
</script>